<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#1b1b2b">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("common.title.announcement") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <block v-for="(item, index) in announcement.data" :key="index">
        <view class="announce_box">
          <view class="flex" style="align-items: center; margin-bottom: 54rpx">
            <view class="title flex1">{{ item.value.title }}</view>
            <view
              class="view_detail"
              @click="
                handleNavTo({
                  url: '/pages/announcement/detailed?id=' + item.id,
                })
              "
              >查看详情</view
            >
          </view>
          <view class="body">
            <view>
              <rich-text
                type="text"
                style="color: rgba(255, 255, 255, 0.5); font-size: 24rpx"
                :nodes="item.value.content"
              ></rich-text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions("announcement", ["loadAnnouncement"]),
  },
  computed: {
    ...mapGetters("announcement", ["announcement"]),
  },
};
</script>

<style>
.container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.announce_box {
  width: 100%;
  height: 267rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  margin-bottom: 24px;
  padding: 46rpx 32rpx 0;
  box-sizing: border-box;
}
.title {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 42rpx;
}
.view_detail {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fee096;
  line-height: 33rpx;
}
.body {
  text-indent: 1rem;
  max-height: 116rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>